<template>
  <div class="common-layout">
    <el-container class="container">
      <el-aside width="200px" class="sidebar">
        <el-collapse v-model="activeCollapse" accordion>
          <el-collapse-item title="导航菜单" name="1">
            <el-menu 
              :default-active="activeIndex" 
              class="el-menu-vertical-demo" 
              @select="handleSelect"
            >
              <el-menu-item index="todolist">
                <el-icon><Document /></el-icon>
                <span>待办事项</span>
              </el-menu-item>
              <el-menu-item index="knowledge">
                <el-icon><Collection /></el-icon>
                <span>知识汇总</span>
              </el-menu-item>
            </el-menu>
          </el-collapse-item>
        </el-collapse>
      </el-aside>
      
      <el-container>
        <el-header class="header">Vue3 TodoList 应用</el-header>
        <el-main class="main">
          <component :is="currentComponent" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { ref, shallowRef, markRaw } from 'vue'
import { Document, Collection } from '@element-plus/icons-vue'
import TodoList from './components/TodoList.vue'
import KnowledgeList from './components/KnowledgeList.vue'

export default {
  name: 'App',
  components: {
    TodoList,
    KnowledgeList,
    Document,
    Collection
  },
  setup() {
    const activeCollapse = ref(['1'])
    const activeIndex = ref('todolist')
    const currentComponent = shallowRef(markRaw(TodoList))

    const handleSelect = (key) => {
      activeIndex.value = key
      switch(key) {
        case 'todolist':
          currentComponent.value = markRaw(TodoList)
          break
        case 'knowledge':
          currentComponent.value = markRaw(KnowledgeList)
          break
      }
    }

    return {
      activeCollapse,
      activeIndex,
      currentComponent,
      handleSelect
    }
  }
}
</script>

<style>
.container {
  height: 100vh;
}

.sidebar {
  background-color: #f5f7fa;
}

.header {
  background-color: #409EFF;
  color: white;
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
}

.main {
  padding: 20px;
  background-color: #f5f7fa;
}
</style> 